<%- include('../../layouts/base/header', { title: '阅读 - ' + document.title, hideNav: true }) %>

<div class="min-h-screen flex">
    <!-- 左侧侧边栏 -->
    <aside id="sidebar" class="w-80 bg-white border-r border-gray-200 flex flex-col h-screen transition-all duration-300">
        <!-- 顶部：书籍信息 -->
        <div class="flex-shrink-0 border-b border-gray-100 hover:bg-gray-50">
            <a href="/book/<%= book.username %>/<%= book.slug %>" class="mx-3 block rounded-lg p-2 transition-colors">
                <div class="flex items-center space-x-4">
                    <% if (book.cover_image) { %>
                        <img src="<%= book.cover_image %>"
                             alt="<%= book.title %>"
                             class="w-12 h-12 rounded-lg object-cover shadow-sm"/>
                    <% } else { %>
                        <div class="min-w-12 max-w-12 min-h-12 max-h-12 bg-gray-100 rounded-lg flex items-center justify-center shadow-md border-2 border-gray-100">
                            <i class="fas fa-book text-gray-400 text-lg"></i>
                        </div>
                    <% } %>
                    <div class="flex-1 min-w-0">
                        <h1 class="text-lg font-semibold text-gray-900 truncate">
                            <%= book.title %>
                        </h1>
                        <p class="text-sm text-gray-600 truncate">
                            作者：<%= book.username %>
                        </p>
                    </div>
                </div>
            </a>
        </div>

        <!-- 中部：目录 -->
        <div class="flex-1 overflow-hidden flex flex-col">
            <div class="flex-1 overflow-y-auto px-2 py-2">
                <%- include('../../components/tree', {
                    linkPattern: '/book/reader/{username}/{bookSlug}/{docSlug}',
                    documents: documents,
                    currentDocument: document,
                    bookUsername: book.username,
                    bookSlug: book.slug,
                    expandAll: false,
                    showStatusBadge: false,
                    showIcons: false,
                    enableContextMenu: false
                }) %>
            </div>
        </div>

        <!-- 底部：版权信息 -->
        <div class="flex-shrink-0 p-4 border-t border-gray-100 bg-gray-50">
            <p class="text-xs text-gray-500 text-center">
                本书籍由 <span class="font-medium"><%= locals.site?.site_name || 'InfoSphere' %></span> 构建
            </p>
        </div>
    </aside>

    <!-- 右侧：文档阅读区域 -->
    <main class="flex-1 flex flex-col bg-white h-screen">
        <!-- 顶部工具栏 -->
        <div class="flex-shrink-0 bg-white border-b border-gray-200 shadow-sm">
            <div class="px-6 py-3">
                <div class="flex items-center justify-between">
                    <!-- 左侧：切换按钮和文档标题 -->
                    <div class="flex items-center space-x-3">
                        <!-- 侧边栏切换按钮 -->
                        <button id="toggleSidebarBtn"
                                class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-md transition-colors"
                                title="隐藏/显示目录">
                            <i class="fas fa-bars"></i>
                        </button>

                        <h3 class="text-lg font-semibold text-gray-900 truncate">
                            <%= document.title %>
                        </h3>
                    </div>

                    <!-- 右侧操作按钮 -->
                    <div class="flex items-center space-x-3">
                        <!-- 阅读进度 -->
                        <div class="flex items-center space-x-4 text-sm text-gray-500">
                            <span id="readingProgress">0%</span>
                            <span id="estimatedTime" title="预计阅读时间"></span>
                        </div>

                        <!-- 阅读设置按钮 -->
                        <button id="readingSettingsBtn"
                                class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-md transition-colors"
                                title="阅读设置">
                            <i class="fas fa-cog"></i>
                        </button>

                        <!-- 全屏按钮 -->
                        <button id="fullscreenBtn"
                                class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-md transition-colors"
                                title="全屏阅读">
                            <i class="fas fa-expand"></i>
                        </button>

                        <% if (user && user.id === document.user_id) { %>
                            <a href="/book/writer/<%= book.username %>/<%= book.slug %>/<%= document.slug %>"
                               class="flex items-center space-x-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded-md transition-colors shadow-sm hover:shadow-md">
                                <i class="fas fa-edit"></i>
                                <span>编辑</span>
                            </a>
                        <% } %>
                    </div>
                </div>
            </div>
        </div>

        <!-- 文档内容区域 -->
        <div class="flex-1 overflow-hidden">
            <div class="h-full max-w-7xl mx-auto">
                <% if (document && document.html) { %>
                    <div id="documentContent"
                         class="prose prose-lg max-w-none h-full overflow-y-auto px-8 py-6"
                         style="line-height: 1.8;">
                        <%- document.html %>
                    </div>
                <% } else { %>
                    <div class="flex items-center justify-center h-full text-gray-500">
                        <div class="text-center">
                            <i class="fas fa-file-alt text-4xl mb-4"></i>
                            <p class="text-lg">文档内容为空</p>
                            <p class="text-sm mt-2">该文档还没有内容</p>
                        </div>
                    </div>
                <% } %>
            </div>
        </div>
    </main>
</div>

<!-- 阅读设置面板 -->
<div id="readingSettingsPanel" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
    <div class="absolute top-20 right-4 bg-white rounded-lg shadow-xl border border-gray-200 w-80">
        <div class="p-4 border-b border-gray-100">
            <h3 class="font-semibold text-gray-900">阅读设置</h3>
        </div>
        <div class="p-4 space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">字体大小</label>
                <div class="flex items-center space-x-2">
                    <button id="decreaseFontSize" class="p-1 text-gray-500 hover:text-gray-700">
                        <i class="fas fa-minus"></i>
                    </button>
                    <span id="currentFontSize" class="text-sm text-gray-600 w-12 text-center">16px</span>
                    <button id="increaseFontSize" class="p-1 text-gray-500 hover:text-gray-700">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">行间距</label>
                <div class="flex items-center space-x-2">
                    <button id="decreaseLineHeight" class="p-1 text-gray-500 hover:text-gray-700">
                        <i class="fas fa-minus"></i>
                    </button>
                    <span id="currentLineHeight" class="text-sm text-gray-600 w-12 text-center">1.8</span>
                    <button id="increaseLineHeight" class="p-1 text-gray-500 hover:text-gray-700">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>
            </div>

            <div class="flex justify-end pt-2">
                <button id="closeSettingsPanel" class="px-3 py-1 text-sm text-gray-600 hover:text-gray-800">
                    关闭
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // 侧边栏切换功能
        const sidebar = document.getElementById('sidebar')
        const toggleSidebarBtn = document.getElementById('toggleSidebarBtn')
        let sidebarVisible = true

        toggleSidebarBtn?.addEventListener('click', function () {
            if (sidebarVisible) {
                // 隐藏侧边栏
                sidebar.style.width = '0'
                sidebar.style.overflow = 'hidden'
                sidebar.style.borderRight = 'none'
                toggleSidebarBtn.innerHTML = '<i class="fas fa-chevron-right"></i>'
                toggleSidebarBtn.title = '显示目录'
                sidebarVisible = false
            }
            else {
                // 显示侧边栏
                sidebar.style.width = '20rem'
                sidebar.style.overflow = 'visible'
                sidebar.style.borderRight = '1px solid #e5e7eb'
                toggleSidebarBtn.innerHTML = '<i class="fas fa-bars"></i>'
                toggleSidebarBtn.title = '隐藏目录'
                sidebarVisible = true
            }
        })

        // 全屏功能
        const fullscreenBtn = document.getElementById('fullscreenBtn')
        fullscreenBtn?.addEventListener('click', function () {
            if (document.fullscreenElement) {
                document.exitFullscreen()
            }
            else {
                document.documentElement.requestFullscreen()
            }
        })

        // 阅读设置
        const readingSettingsBtn = document.getElementById('readingSettingsBtn')
        const readingSettingsPanel = document.getElementById('readingSettingsPanel')
        const closeSettingsPanel = document.getElementById('closeSettingsPanel')

        readingSettingsBtn?.addEventListener('click', function () {
            readingSettingsPanel.classList.toggle('hidden')
        })

        closeSettingsPanel?.addEventListener('click', function () {
            readingSettingsPanel.classList.add('hidden')
        })

        readingSettingsPanel?.addEventListener('click', function (e) {
            if (e.target === readingSettingsPanel) {
                readingSettingsPanel.classList.add('hidden')
            }
        })

        // 字体大小调整
        let currentFontSize = 16
        const documentContent = document.getElementById('documentContent')
        const currentFontSizeSpan = document.getElementById('currentFontSize')

        document.getElementById('increaseFontSize')?.addEventListener('click', function () {
            if (currentFontSize < 24) {
                currentFontSize += 2
                documentContent.style.fontSize = currentFontSize + 'px'
                currentFontSizeSpan.textContent = currentFontSize + 'px'
            }
        })

        document.getElementById('decreaseFontSize')?.addEventListener('click', function () {
            if (currentFontSize > 12) {
                currentFontSize -= 2
                documentContent.style.fontSize = currentFontSize + 'px'
                currentFontSizeSpan.textContent = currentFontSize + 'px'
            }
        })

        // 行间距调整
        let currentLineHeight = 1.8
        const currentLineHeightSpan = document.getElementById('currentLineHeight')

        document.getElementById('increaseLineHeight')?.addEventListener('click', function () {
            if (currentLineHeight < 2.5) {
                currentLineHeight += 0.1
                currentLineHeight = Math.round(currentLineHeight * 10) / 10
                documentContent.style.lineHeight = currentLineHeight
                currentLineHeightSpan.textContent = currentLineHeight
            }
        })

        document.getElementById('decreaseLineHeight')?.addEventListener('click', function () {
            if (currentLineHeight > 1.2) {
                currentLineHeight -= 0.1
                currentLineHeight = Math.round(currentLineHeight * 10) / 10
                documentContent.style.lineHeight = currentLineHeight
                currentLineHeightSpan.textContent = currentLineHeight
            }
        })

        // 阅读进度
        function updateReadingProgress() {
            const content = document.getElementById('documentContent')
            if (content) {
                const scrollTop = content.scrollTop
                const scrollHeight = content.scrollHeight - content.clientHeight
                const progress = scrollHeight > 0 ? Math.round((scrollTop / scrollHeight) * 100) : 0

                const progressElement = document.getElementById('readingProgress')
                if (progressElement) {
                    progressElement.textContent = progress + '%'
                }
            }
        }

        document.getElementById('documentContent')?.addEventListener('scroll', updateReadingProgress)
    })
</script>

<%- include('../../layouts/base/footer') %>